<template>
    <div >
            <Table stripe :height="height"  ref="selection" :columns="columns" :data="graphList" @on-select="selectRow" @on-select-all="selectRow" @on-selection-change="selectRow">
            </Table>
            <fullModal v-model="modal.datasource">
                <graph-datasource ref="graphDatasource" :graph="graph"></graph-datasource>
            </fullModal>
            <graph-edit ref="graphEdit"  @refreshGraphList="refreshGraphList"></graph-edit>
    </div>
</template>
<script>
import util              from 'util'
import getData           from 'getData'
import fullModal         from '@/components/common/fullmodal.vue'
import graphDatasource   from './graph-datasource'
import graphEdit         from './graph-edit'

export default {
    components:{fullModal,graphDatasource,graphEdit},
    data () {
        return {
            selectRowList:[],
            modal:{
                datasource:false
            },
            graph:{},
            columns: [
                {
                    title: '元件名称',
                    minWidth: 150,
                    key: 'graphName'
                },
                {
                    title: '创建人',
                    minWidth: 90,
                    key: 'createName'
                },
                {
                    title: '创建时间',
                    minWidth: 150,
                    key: 'createTime',
                    render: (h, params) => {
                        const temp = util.util.formatDate(params.row.createTime, 3);
                        return (
                            <div>
                            {temp}
                            </div>
                        )
                    }
                },
                {
                    title: '操作',
                    minWidth: 140,
                    key: '',
                    align:'center',
                    render: (h, params) => {
                         return (<div class="table-column-btn">
                                <div>
                                    <tooltip content="基本信息编辑" placement="bottom" transfer theme="light">
                                        <a on-click={()=>{this.edit(params)}}><i class="zlstbd-icon-edit"></i></a>
                                    </tooltip>
                                    <tooltip content="属性编辑" placement="bottom" transfer theme="light">
                                        <a on-click={()=>{this.editGraph(params.row)}}><i class="zlstbd-icon-setting"></i></a>
                                    </tooltip>
                                    <tooltip content="导出" placement="bottom" transfer theme="light">
                                        <a on-click={()=>{this.exportPic(params.row)}}><i class="fa fa-line-chart"></i></a>
                                    </tooltip>
                                    <tooltip content="删除" placement="bottom" transfer theme="light">
                                        <a on-click={()=>{this.del(params)}}><i class="zlstbd-icon-delete"></i></a>
                                    </tooltip>
                                </div>
                            </div>);
                    }
                }
            ],
            height: 300
        }
    },
    props: {
        graphList:{
            type:Array
        },
        batchFlag:{
            type:Boolean
        },
        checklist:{
            type:Array,
            default:()=>{
                return  [];
            }
        },
        tableAllSelected:{
            type:Boolean
        },
        catalogTypeSelect: {
          type: Object
        }
    },
    mounted () {
      let vm = this
      vm.$nextTick(function () {
        vm.height = document.body.clientHeight - 185
      })
    },
    watch:{
        batchFlag:{
            handler(val,oldVal){
                if(val){
                    this.columns.unshift({
                        type: 'selection',
                        minWidth: 60,
                        align: 'center'
                    })
                }else{
                    this.handleSelectAll(false)
                    this.columns.splice(0,1)
                }
            },
            deep:true
        },
        tableAllSelected(val){
            if(this.checklist.length!=this.graphList.length){
                this.handleSelectAll(true)
            }else{
                this.handleSelectAll(false)
            }
        }
    },
    methods:{
        //表格全选
        handleSelectAll (status) {
            this.$refs.selection.selectAll(status);
        },
        //属性编辑
        editGraph(params){
          let query = Object.assign({id:params.graphId}, this.catalogTypeSelect)
          this.$router.push({
              path:'/graph/add',
              query
          });
        },
        //基本信息编辑
        edit(params) {
            // this.$refs.graphPoptip.cancel();
            this.$refs.graphEdit.show(params.row);
        },
        refreshGraphList(projectId)  {
            this.$emit('queryListByProId', projectId);
        },
        //点击删除图表按钮，显示弹窗
        del: function(params) {
            var that = this
            that.$Modal.confirm({
            content: "是否删除该元件?",
            onOk: function() {
                that.deleteGraph(params.row);
            },
            okText:"是",
            cancelText:"否"
            });
        },
        deleteGraph(params){
             getData.get('deleteGraph',{}, params.graphId).then(res => {
                if (res.status == 200 && res.data.code == '000') {
                    this.$Message.success('删除成功！');
                    this.refreshGraphList(params.projectId);
                } else if (res.status == 200) {
                    this.$Message.warning('删除失败: ' + res.data.errorMsg);
                }
             });
        },
         //导出图片
        exportPic(graph) {//下载图片地址和图片名
             this.graph = graph
            let image = new Image();
            // 解决跨域 Canvas 污染问题
            image.setAttribute("crossOrigin", "anonymous");
            image.onload = function() {
                let canvas = document.createElement("canvas");
                canvas.width = image.width;
                canvas.height = image.height;
                let context = canvas.getContext("2d");
                context.drawImage(image, 0, 0, image.width, image.height);
                let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
                let a = document.createElement("a"); // 生成一个a元素
                let event = new MouseEvent("click"); // 创建一个单击事件
                a.download = graph.graphName; // 设置图片名称
                a.href = url; // 将生成的URL设置为a.href属性
                a.dispatchEvent(event); // 触发a的单击事件
            };
            image.src = graph.graphUrl;
        },
        //查看数据源
        viewDatasource(graph){
            this.graph=graph
            this.modal.datasource = true;
        },
        selectRow (row) {
            this.selectRowList = row
            this.$emit("getBatchGraphIdFromTable",this.selectRowList)
        },
    }
}
</script>
